<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>

    <script>

        // 防抖和节流都是为了解决高频率触发事件的
        //    resize / scroll


        // 降低事件频率   原本1s触发100次    1s触发10次
        // 把事件触发的时间间隔拉长了    --- 也就是写延时器


        // 防抖 ： 每一次都清除上一个延时器 ， 停止触发事件一段时间以后才会再次触发
        
        // var timer = null ;

        // window.onscroll = function () {
        //     if(timer) clearTimeout(timer) ;
        //     timer = setTimeout(() => {
        //         console.log('我滚了');
        //     }, 300)

        // }


        window.onscroll = debounce(function(e) {
            console.log(e);
            // console.log(111);
        })


        document.onclick = debounce(function(e) {
            console.log(e);
            console.log(this);
        })

        

        // function debounce(cb) {
        //     var timer = null ;
        //     return function(e) {   // 这是真正的事件处理函数
        //         console.log(this);
        //         if(timer) clearTimeout(timer) ;
        //         let _this = this ;
        //         timer = setTimeout(function() {
        //            cb.call(_this ,e)
        //         }, 300)
        //     }
        // }

        // function debounce(cb) {
        //     var timer = null ;
        //     return function(e) {   // 这是真正的事件处理函数
        //         console.log(this);
        //         if(timer) clearTimeout(timer) ;
        //         let _this = this ;
        //         timer = setTimeout(() => {
        //            cb.call(this ,e)
        //         }, 300)
        //     }
        // }


        // function debounce(cb) {
        //     var timer = null ;
        //     return function() {   // 这是真正的事件处理函数
        //         let arg = arguments ;
        //         if(timer) clearTimeout(timer) ;
        //         let _this = this ;
        //         timer = setTimeout(() => {
        //            cb.call(this , ...arg)
        //         }, 300)
        //     }
        // }


        function debounce(cb) {
            var timer = null ;
            return function(...arg) {   // 这是真正的事件处理函数
                
                if(timer) clearTimeout(timer) ;
                let _this = this ;
                timer = setTimeout(() => {
                    // apply 接收数组   
                   cb.apply(this , arg) ;
                }, 300)
            }
        }



    </script>

</body>

</html>